<template>
  <div class="first one-page">
    <div class="lbt">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <div class="con">
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="index == active ? 'on' : ''"
            @click="active = index"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div
          v-for="(item, index) in list[active].children"
          :key="index"
          @click="detailFn(item.id)"
        >
          <img :src="item.img" alt="" />
          <p>
            <b>{{ item.titlee }}</b>
          </p>
          <p>{{ item.title }}</p>
          <p>￥ {{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [1],
      active: 0,
    };
  },
  created() {
    this.Fn();
  },
  methods: {
    Fn() {
      axios.get("/list").then((res) => {
        this.list = res.data;
        console.log(this.list);
      });
    },
    detailFn(id) {
      localStorage.setItem("actice", this.active);
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang='scss'>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.lbt {
  width: 100%;
  height: 150px;
  background: chocolate;
}
.con {
  width: 100%;
  height: calc(100% - 150px);
  //   background: #ccc;
  display: flex;
  .left {
    width: 100px;
    height: 100%;
    ul {
      li {
        line-height: 50px;
      }
    }
  }
  .right {
    width: calc(100% - 100px);
    height: 100%;
    overflow: scroll;
  }
}
.on {
  color: red;
}
</style>